<template>
  <div class="distribution" box-border pb-30rpx>
   <div class="member" flex items-center px-20rpx py-20rpx>
     <nut-avatar size="normal"><image :src="distributionData.face" /></nut-avatar>
      <div class="nick" flex flex-col justify-around text-28rpx ml-5 h-90rpx>
          <div>{{distributionData.nickName}}</div>
          <div>手机号：{{distributionData.mobile}}</div>
      </div>
    </div>

    <div class="portrait-box" mx-24rpx mt-20rpx relative text-white flex p-20rpx>
      <image absolute bottom-0 left-0 src="/static/pointTrade/point_bg_1.png" mode=""></image>
      <div class="left" indent-4>
        <div text-neutral-100>今日收益（元）</div>
        <div font-semibold>{{ unitPrice(distributionData.todayRebate, '￥') }}</div>
      </div>
      <div class="right" indent-4>
        <div text-neutral-100>总收益（元）</div>
        <div font-semibold>{{ unitPrice(distributionData.rebateTotal, '￥') }}</div>
        <div text-neutral-100>含待结算{{distributionData.commissionFrozen}}元</div>
      </div>
    </div>

    <div class="statistics" mx-24rpx bg-white px-20rpx>
    	<div class="list" flex py-30rpx @click="$navigateTo('/pages/mine/distribution/order?id='+distributionData.id+'&name='+distributionData.memberName)">
    		<div class="left" indent-4><div text-neutral-400 mb-20rpx>今日推广订单</div><div font-semibold>{{distributionData.todayOrderCount || 0}}</div></div>
    		<div class="right" indent-4><div text-neutral-400 mb-20rpx>累计推广订单</div><div font-semibold>{{distributionData.totalOrderCount || 0}}</div></div>
    	</div>
      <div class="list" flex py-30rpx @click="$navigateTo('/pages/mine/distribution/client')">
    		<div class="left" indent-4><div text-neutral-400 mb-20rpx>今日新增客户</div><div font-semibold>{{distributionData.todayCustomerNum || 0}}</div></div>
    		<div class="right" indent-4><div text-neutral-400 mb-20rpx>累计新增客户</div><div font-semibold>{{distributionData.totalCustomerNum || 0}}</div></div>
    	</div>
    	<div class="list" flex py-30rpx @click="$navigateTo('/pages/mine/distribution/team')">
    		<div class="left" indent-4><div text-neutral-400 mb-20rpx>今日新增邀请</div><div font-semibold>{{distributionData.todayInvitationNum || 0}}</div></div>
    		<div class="right" indent-4><div text-neutral-400 mb-20rpx>累计新增邀请</div><div font-semibold>{{distributionData.totalInvitationNum || 0}}</div></div>
    	</div>
    	<div class="withdrawal-amount" flex justify-between items-center pr-20rpx py-30rpx @click="$navigateTo('/pages/mine/distribution/withdrawal')">
    		<div text-neutral-600 indent-4>可提现金额</div>
    		<div flex items-center>
    			<span style="margin-right: 20rpx;font-weight: bold;">{{ unitPrice(distributionData.canRebate, '￥')}}</span>
          <nut-icon size="12" name="rect-right" color="#999999"></nut-icon>
    		</div>
    	</div>
    </div>
    <div mx-24rpx>
      <distributionTools :data="distributionData" />
    </div>


  </div>
</template>

<script setup lang="ts">
  import { distributionHome } from "@/api/goods";
  import { unitPrice } from '@/utils/filters';
  import distributionTools from '@/pages/mine/distribution/tools.vue';
  import { onShow } from '@dcloudio/uni-app';
  // import storage from '@/utils/storage'
  // const memberInfo: any = {
  //   face: storage.getUserInfo().face || "", //默认头像
  //   nickName: storage.getUserInfo().nickName || "",
  //   mobile: storage.getUserInfo().mobile || "",
  // }
  const distributionData = ref<any>({});

  async function init() {
    const res = await distributionHome();
    if (res.data.success) {
      distributionData.value = res.data.result;
    }
  }

  onMounted(() => {
    init()
  })

  onShow(() => {
    init()
  })
</script>

<style scoped lang="scss">
  .distribution {
    .portrait-box {
      background: linear-gradient(91deg, #ff6b35 1%, #ff9f28 99%);
      border-radius: 24rpx 24rpx 0 0;
      box-shadow: 6rpx 10rpx 24rpx rgba(126, 126, 126, 0.1);
      > image:first-child {
        width: 263rpx;
        height: 250rpx;
        transform: rotateY(180deg);
      }
      .left, .right {
        width: 50%;
        font-size: 28rpx;
        line-height: 48rpx;
      }
    }
    .statistics {
      font-size: 28rpx;
      border-radius: 0 0 24rpx 24rpx;
      box-shadow: 6rpx 10rpx 24rpx rgba(126, 126, 126, 0.1);
      .list {
        border-bottom: 2rpx solid #f1f2f3;
    		.left, .right {
          width: 50%;
    		}
    	}
    }
  }
</style>
